<template>
	<el-row style="padding-bottom: 10px">
		<el-col :span="24">
			<el-card  shadow="hover">
				<template #header>
					<div class="companyInfo">
						<span>{{ title }}</span>
					</div>
				</template>
				<div class="hotlist-container">
					<ul class="hotlist">
						<li v-for="(item, index) in hotList" :key="index" class="hotlist-item">
							<router-link :to="`/itemInfo/${item.id}`">
								<span class="rank">{{ index + 1 }}</span>
								<span class="title">{{ item.title }}</span>
								<span class="count" v-if="type ==='collect'">{{ item.collectNumber }} </span>
								<span class="count" v-if="type ==='rating'">{{ item.ratingsNumber }} </span>
							</router-link>
						</li>
					</ul>
				</div>
			</el-card>
		</el-col>
	</el-row>
</template>

<script setup lang="ts">
// 接收父组件传递的 props
const props = defineProps(<any>{
	title: String,  // 接收传递的 title 属性，类型为字符串
	hotList: Array, // 接收传递的 hotList 属性，类型为数组
	type: String, // 接收传递的 hotList 属性，类型为数组
});
</script>

<style scoped>
.companyInfo {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	padding: 5px;
}

.hotlist-container {
	padding: 10px;
}

.hotlist {
	list-style: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
}
.hotlist-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-bottom: 1px solid #eee;
}
.hotlist-item:hover {
	background-color: #f9f9f9; /* 鼠标悬停效果 */
}

.rank {
	font-weight: bold;
	color: #ff4d4f; /* 排名颜色 */
	width: 30px;
}

.title {
	flex: 1;
	margin-left: 10px;
	color: #555;
	white-space: nowrap;      /* 不换行 */
	overflow: hidden;         /* 超出部分隐藏 */
	text-overflow: ellipsis;  /* 超出部分显示省略号 */
	padding-right: 30px;
}

.count {
	color: #999;
	font-size: 14px;
}
</style>
